<template>
  <div>
      <van-sticky>
        <van-nav-bar title="黑马头条" />
        <van-form @submit="onSubmit">
            <van-field
                v-model="formLogin.mobile"
                name="mobile"
                label="mobile"
                placeholder="请输入手机号"
                :rules="[{ required: true, message: '请填写正确手机号', pattern:/^1[3456789]\d{9}$/ }]"
            />
            <van-field
                v-model="formLogin.code"
                type="number"
                name="code"
                label="code"
                placeholder="请输入验证码"
                :rules="[{ required: true, message: '请输入正确验证码', pattern:/^\d{6}$/}]"
            />
            <div style="margin: 16px;">
                <van-button round block :disabled='disabled' :loading='disabled' loading-text="加载中..."  type="info" native-type="submit">提交</van-button>
            </div>
        </van-form>
      </van-sticky>
  </div>
</template>

<script>
import { loginAPI } from '../api/index'
import { mapMutations } from 'vuex'
export default {
  data () {
    return {
      formLogin: {
        mobile: '13888888888',
        code: '246810'
      },

      disabled: false
    }
  },
  methods: {
    ...mapMutations('user', ['setRefreshToken', 'setToken']), // Mutations 把方法影视到页面中
    async onSubmit (val) {
      this.disabled = true // 按钮变成不能点击
      const [err, res] = await loginAPI(val)
      this.disabled = false // 不转圈
      if (err) return this.$Notify({ type: 'danger', message: '登录失败' })
      else this.$Notify({ type: 'success', message: '登录成功' })
      const { refresh_token, token } = res.data.data
      this.setRefreshToken(refresh_token)
      this.setToken(token)
    }
  }
}
</script>

<style lang="less" scoped></style>
